<template>
	<view class="content">
		<!-- 停车区分布地图 -->
		<!-- 经度：longitude -->
		<!-- 纬度：latitude -->
		<!-- @markertap拿到下标 -->
		<map id="parkingMap" :style="{width:mapWidth+'px', height:mapHeight + 'px'}" :latitude="40.063251"
			:longitude="116.419374" scale="15" :markers="markers" @markertap="doMarkerTap"></map>
		<!-- 停车区空闲统计图 -->
		<qiun-data-charts :style="{marginTop:'10px', width:chartWidth+'px',height:chartHeight+'px'}" type="column"
			:chartData="parkingZoneData" :opts="parkingZoneOpts" />

	</view>
</template>

<script>
	import {
		parkingZoneList
	} from '../../service'
	export default {
		data() {
			return {
				mapWidth: 0, // 地图区域宽度
				mapHeight: 0, // 地图区域高度
				chartWidth: 0, // 统计图宽度
				chartHeight: 280, // 统计图高度,定死的
				parkingZones: [], // 停车区列表
				markers: [], // 在地图上的标记点列表
				parkingZoneData: {}, // 统计图表需要的停车区数据
				parkingZoneOpts: {}, // 统计图需要的选项对象，控制数据条的颜色
			}
		},
		async onLoad() {
			// 1.读取窗口的高度(屏幕的高度-页签栏高度-导航条高度)
			let {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync()
			this.mapWidth = windowWidth // 地图宽度
			this.chartWidth = windowWidth // 统计图宽度
			this.mapHeight = windowHeight - this.chartHeight // 地图高=窗口高-下方的统计图高度
			// 2.向服务器发异步请求，获取各个停车区的数据
			let data = await parkingZoneList()
			// console.log(data);
			this.parkingZones = data
			// 3.把所有停车区的数组数据映射为地图标记点maker的数组
			this.markers = this.parkingZones.map((i, idx) => {
				return {
					id: idx, // 每个标记点的唯一标识
					longitude: i.longitude,
					latitude: i.latitude,
					// title: i.zname, // 标注点名，callout存在时会被忽略
					iconPath: '/static/img/loc.png',
					// 每个标记点可以弹出的气泡窗口
					callout: {
						content: i.zname + '空余车位：' + i.unoccupied
					}
				}
			})
			// 4.把停车区数据映射为柱状统计图数据
			this.parkingZoneData = {
				// categories: ['1', '2', '3', '4'],
				categories: this.parkingZones.map(i => {
					return i.zname.slice(-2)
				}),
				series: [{
					name: '空闲车位数',
					data: this.parkingZones.map(i => {
						return i.unoccupied
					})
				}]
			}
			// 5.把停车区的数据映射为统计图的颜色数据
			this.parkingZoneOpts = {
				color: [
					'#090'
				]
			}
		},
		methods: {
			doMarkerTap(e) {
				// console.log(e);
				let longitude = e.detail.longitude
				let latitude = e.detail.latitude
				let marker = uni.createMapContext('parkingMap', this)
				marker.moveToLocation({
					longitude,
					latitude
				})

			}

		}
	}
</script>

<style lang="scss" scoped>

</style>
